			<div class="auth">
					{% if user_var.role < 6  %}
						{{user_var.display_name}}
						<span><img src="views/img/contactor128.png" alt=""></span> 
						<a class="link" href="{{base_url}}logout">Выход</a>	
					
					{% else %}	
						<a class="link" href="#" data-bind="click:views.auth.clickLogin">Вход </a>
					{% endif %}
					
			</div>
	
			<style>
				body{
					overflow-y:scroll; 
				}

				.auth-modal-input{

				}
				.auth-underlayer{
					position:absolute;	
					background-color: rgba(0,0,0,0.4);
					width:100%;
					height: 100%;
					margin:0;
					top:0;
					left:0;
					z-index:9999;
					overflow: auto;
					display:none;
				}	
				.auth-main{
					position:relative;
					background-color: #ececec;
					margin-left: auto;
					margin-right: auto;
					margin-top: 200px;
					width:476px;
					height:435px;
					border: 2px solid grey;
				}

				

				.auth-tab-buttons{
					position:relative;
					width:100%;
					height:54px;
					text-align: center;
					font-style: 14px;
					line-height: 54px;
					color:#4f647e;
				}

				.auth-tab-button{
					width:49.9%;
					float:left;
				}

				.auth-tab-button-inactive{
					background-color: #b7b6b6;
					border-bottom:1px solid grey;
					border-right:1px solid gery;
					border-left:1px solid gery;
				}


				.auth-main-tab{
					width:356px;
					margin-left: auto;
					margin-right: auto;
					padding-top:16px;
				}

				.auth-input {
					margin-top:10px;
					font-size:15px;
					width:345px;
					line-height: 40px;
				}
				.auth-button-place{
					width:345px;
					text-align: center;
				}	
				.auth-button {
					position:relative;
					margin-top: 5px;
					width:143px;
					height:40px;
					margin-left: auto;
					margin-right: auto;
				}	
				.auth-link{
					padding-top:5px;
					text-align: right;
					float:right;
					width:345px;
					font-size: 15px;
					color:grey;
				}

				.auth-in{
					margin-bottom:23px;
					
					-moz-box-shadow: 0px 2px 4px -1px #060e17;
					-webkit-box-shadow: 0px 2px 4px -1px #060e17;
					box-shadow: 0px 2px 4px -1px #060e17;
					background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #3d93f6) );
					background:-moz-linear-gradient( center top, #3d94f6 5%, #3d93f6 100% );
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#3d93f6');
					background-color:#3d94f6;
					-webkit-border-top-left-radius:4px;
					-moz-border-radius-topleft:4px;
					border-top-left-radius:4px;
					-webkit-border-top-right-radius:4px;
					-moz-border-radius-topright:4px;
					border-top-right-radius:4px;
					-webkit-border-bottom-right-radius:4px;
					-moz-border-radius-bottomright:4px;
					border-bottom-right-radius:4px;
					-webkit-border-bottom-left-radius:4px;
					-moz-border-radius-bottomleft:4px;
					border-bottom-left-radius:4px;
					text-indent:0;
					border:3px solid #ffffff;
					display:inline-block;
					color:#ffffff;
					font-family:Arial;
					font-size:15px;
					font-weight:bold;
					font-style:normal;
					height:40px;
					line-height:40px;
					width:144px;
					text-decoration:none;
					text-align:center;
					text-shadow:1px 1px 0px #1570cd;
				}
				.auth-vk:hover {
					background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d93f6), color-stop(1, #3d94f6) );
					background:-moz-linear-gradient( center top, #3d93f6 5%, #3d94f6 100% );
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d93f6', endColorstr='#3d94f6');
					background-color:#3d93f6;
				}.auth-vk:active {
					position:relative;
					top:1px;
				}

				.auth-vk{
					
					

					-moz-box-shadow: 0px 2px 4px -1px #060e17;
					-webkit-box-shadow: 0px 2px 4px -1px #060e17;
					box-shadow: 0px 2px 4px -1px #060e17;
					background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #3d93f6) );
					background:-moz-linear-gradient( center top, #3d94f6 5%, #3d93f6 100% );
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#3d93f6');
					background-color:#3d94f6;
					-webkit-border-top-left-radius:4px;
					-moz-border-radius-topleft:4px;
					border-top-left-radius:4px;
					-webkit-border-top-right-radius:4px;
					-moz-border-radius-topright:4px;
					border-top-right-radius:4px;
					-webkit-border-bottom-right-radius:4px;
					-moz-border-radius-bottomright:4px;
					border-bottom-right-radius:4px;
					-webkit-border-bottom-left-radius:4px;
					-moz-border-radius-bottomleft:4px;
					border-bottom-left-radius:4px;
					text-indent:0;
					border:3px solid #ffffff;
					display:inline-block;
					color:#ffffff;
					font-family:Arial;
					font-size:15px;
					font-weight:bold;
					font-style:normal;
					height:40px;
					line-height:40px;
					width:267px;
					text-decoration:none;
					text-align:center;
					text-shadow:1px 1px 0px #1570cd;
				}
				.auth-vk:hover {
					background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d93f6), color-stop(1, #3d94f6) );
					background:-moz-linear-gradient( center top, #3d93f6 5%, #3d94f6 100% );
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d93f6', endColorstr='#3d94f6');
					background-color:#3d93f6;
				}.auth-vk:active {
					position:relative;
					top:1px;
				}

				.auth-fb{
					<style type="text/css">

					-moz-box-shadow: 0px 2px 4px -1px #060e17;
					-webkit-box-shadow: 0px 2px 4px -1px #060e17;
					box-shadow: 0px 2px 4px -1px #060e17;
					background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #3d93f6) );
					background:-moz-linear-gradient( center top, #3d94f6 5%, #3d93f6 100% );
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#3d93f6');
					background-color:#3d94f6;
					-webkit-border-top-left-radius:4px;
					-moz-border-radius-topleft:4px;
					border-top-left-radius:4px;
					-webkit-border-top-right-radius:4px;
					-moz-border-radius-topright:4px;
					border-top-right-radius:4px;
					-webkit-border-bottom-right-radius:4px;
					-moz-border-radius-bottomright:4px;
					border-bottom-right-radius:4px;
					-webkit-border-bottom-left-radius:4px;
					-moz-border-radius-bottomleft:4px;
					border-bottom-left-radius:4px;
					text-indent:0;
					border:3px solid #ffffff;
					display:inline-block;
					color:#ffffff;
					font-family:Arial;
					font-size:15px;
					font-weight:bold;
					font-style:normal;
					height:40px;
					line-height:40px;
					width:267px;
					text-decoration:none;
					text-align:center;
					text-shadow:1px 1px 0px #1570cd;
				}
				.auth-fb:hover {
					background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d93f6), color-stop(1, #3d94f6) );
					background:-moz-linear-gradient( center top, #3d93f6 5%, #3d94f6 100% );
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d93f6', endColorstr='#3d94f6');
					background-color:#3d93f6;
				}.auth-fb:active {
					position:relative;
					top:1px;
				}

				.auth-span{
					color:grey;
				}
			</style>

	
			<div class="auth-modal-input">
				<div class="auth-underlayer">
					<div class="auth-main">
						<div class="auth-tab-buttons" >
							<div class="auth-tab-button auth-tab-button-inactive">
								Регистрация			
							</div>					
							<div class="auth-tab-button " >
								Вход
							</div>	
						</div>				
						<div class="auth-main-tab">
							<form action="{{base_url}}login" method='post'>
								<input class="auth-input" name="login" type="text" placeholder="e-mail"><br>
								<input class="auth-input" name="password" type="password" placeholder="password"><br>
								<a class="auth-link" href="#">  <span>Забыли пароль?</span></a><br>
								<div class='auth-button-place'>
									<button class="auth-button auth-in"> Войти </button><br>
								</div>
							</form>	
							<div class='auth-button-place'>
									<span class="auth-span"> Войти через </span> <br>
									<button class="auth-button auth-vk">Вконтакте</button> <br>
									<button class="auth-button auth-fb">Facebook</button> 
							</div>
							
							
						</div>
					</div>	
				</div>
			</div>